<template>
  <div class="detail-page">
    <el-page-header :content="`订单 #${id}`" @back="$router.back()" />

    <el-card v-if="detail" class="mt-4">
      <template #header>订单基本信息</template>
      <p>订单号：{{ detail.orderBasic.orderNo }}</p>
      <p>下单时间：{{ detail.orderBasic.orderTime }}</p>
      <p>配送状态：{{ deliveryStatusText[detail.orderBasic.deliveryStatus] }}</p>
      <!-- 你想展示的更多字段 … -->
    </el-card>

    <el-empty v-else description="加载中…" />
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { getOrderDetail } from '@/api/order'   // 封装的 GET /orders/{id}

const route = useRoute()
const id = route.params.id

const detail = ref(null)

const deliveryStatusText = {
  1: '待骑手接单', 2: '配送中', 3: '已送达', 4: '配送超时',
  5: '待商家退款', 6: '商家拒绝退款', 7: '商家成功退款',
  8: '交易成功', 9: '交易关闭'
}

async function fetchDetail () {
  const resp = await getOrderDetail(id)
  detail.value = resp.data
}

onMounted(fetchDetail)
</script>

<style scoped>
.detail-page { padding: 20px; }
.mt-4 { margin-top: 16px; }
</style>
